<script setup>

import { useCityStore } from "@/stores/city";
import { useRouter } from 'vue-router';
const cityStore = useCityStore();
const router = useRouter();
const Showlist =['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']

const props = defineProps({
    cityList: {
        type: Object,
        default: () => []
    }
});



function getCityList(letter) {
    return props.cityList[letter]
}

function handleClick(name) {
    cityStore.setNowCity(name);
    cityStore.addCityList(name);
    router.push("/");

}
</script> 
<template> 
<van-index-bar>
    <div v-for="(item, index) in Showlist" :key="index">
        <van-index-anchor  :index="item" />
        <van-cell v-for="city in getCityList(item)" :key="city.id" :title="city.name" 
        class="city-cell" @click="handleClick(city.name)" />
    </div>
    
</van-index-bar>
</template> 
<style scoped>
.city-cell:hover {
    background-color: #f2f2f2;
}
</style>